<template>
  <div>
    <el-table :border="true" :data="tableData">
      <el-table-column type="index" label="#" fixed />
      <el-table-column prop="short_name" width="150" label="简称" fixed />
      <el-table-column prop="import_date"  label="导入期" />
      <el-table-column prop="total_event"  label="体系导入总事项数" />
      <el-table-column
        prop="planned_completion"
        label="体系导入累计计划完成数"
        width="210"
      >
      <template slot-scope="scope">
        <span>{{ scope.row.planned_completion }}</span>
      </template>
      </el-table-column>
      <el-table-column
        prop="complete_current_month"
        label="体系导入累计实际完成数"
      >
      <template slot-scope="scope">
        <span>{{ scope.row.complete_current_month }}</span>
      </template>
      </el-table-column>
      <el-table-column
        prop="completion_rate_current_month"
        label="当前月份完成率"
      >
        <template slot-scope="scope">
          <div class="percentCell">
            <el-progress
            :percentage="
              isNaN(scope.row.completion_rate_current_month)
                ? 0
                : Number(scope.row.completion_rate_current_month)
                
            "
            style="width:80%"
            :show-text="false"
          ></el-progress>
          <span>{{ 
          isNaN(scope.row.completion_rate_current_month)
                ? 0
                :parseInt((scope.row.completion_rate_current_month))
          }}%</span>
                    
          </div>
          
        </template>
      </el-table-column>
      <el-table-column prop="total_completion_rate" label="总完成率"
        >
        <template slot-scope="scope">
          <div class="percentCell">
            <el-progress
            :percentage="
              isNaN(scope.row.total_completion_rate)
                ? 0
                : Number(scope.row.total_completion_rate)
            "
            :format="format"
            style="width:80%"
            :show-text="false"
          ></el-progress> 
          <span>
            {{  isNaN(scope.row.total_completion_rate)
                ? 0
                : parseInt(Number(scope.row.total_completion_rate)) }}%
          </span>
          </div>
      </template
      ></el-table-column>

    </el-table>
  </div>
</template>

<script>
export default {
  props: ["tableData"],
  methods: {
    format(percentage) {
      if (isNaN(percentage)) {
        return "0.00%";
      }
      return Number(percentage).toFixed(2) + "%";
    },
  },
};
</script>

<style scoped lang="scss">
.percentCell {
  display: flex;
  width: 100%;
  align-items: center;
  >span {
    width: 60px;
    flex-shrink: 0;
    margin-left: 5px;
  }
}
</style>